import React from 'react';
import Input from '../';
import Icon from '../../Icon';
import filter from 'filter-anything';

class Search extends React.Component {
    displayName = 'Search';

    onClickSuffix = (e) => {
        this.input.onEnter(e);
    }

    render () {
        let props = Object.assign({}, this.props);
        const enterButton = props['enterButton'];
        props = filter(props, [], ['suffix', 'type']);
        const iconName = 'search';
        const suffix = !enterButton ? <Icon name={iconName} onClick={this.onClickSuffix} style={{cursor: 'pointer'}}/> : null;
        let append = null;
        if (enterButton) {
            append = typeof enterButton === 'string' ? enterButton : <Icon name='search'/>;
        }
        return <Input ref={f => this.input = f} type='text' suffix={suffix} append={append} {...props}/>;
    }
}

export default Search;
